<!--
 * @Description: 详情Tab页切换组件
 * @Author: JiangMing
 * @Date: 2021-09-2 16:45:00
 * @LastEditors: Pengfei Zhang
 * @LastEditTime: 2021-09-15 16:36:21
-->
<template>
  <view class="detail-tab">
    <view class="tab-panel">
      <view
        v-for="(item,index) in list"
        :key="index"
        class="tab-item"
        :class="{'active': item.value == current}"
        :style="{'width': itemWidth}"
        @click="tabClick(item)"
      >
        <view class="tab-item__label">
          <text>{{ item.label }}</text>
          <uni-badge
            v-if="item.badge"
            :text="item.badge"
            type="error"
            size="small"
          />
        </view>
      </view>
    </view>
    <view class="tab-content">
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    /**
     * @list Array { label, value, badge }
     */
    list: {
      type: Array
    }
  },
  data() {
    return {
      current: ''
    }
  },
  computed: {
    itemWidth() {
      let num = 100/this.list.length;
      return `${num.toFixed(2)}%`
    }
  },
  watch: {
    value(val){
      this.current = val
    }
  },
  mounted() {
    this.current = this.value;
  },
  methods: {
    tabClick(row) {
      this.current = row.value;
      this.$emit('input', row.value);
      this.$emit('tab-click', row.value, row);
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-tab {
  .tab-panel {
    display: flex;
    justify-content: space-around;
    font-size: 28rpx;
  }
  .tab-content {

  }
  .tab-item {
    text-align: center;
    height: 90rpx;
    background: rgba(244, 249, 255, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-bottom: 1px solid #EEE;
    position: relative;
    &.active {
      color: #027AFF;
      background: #fff;
      box-shadow: 0px -1px 1px #2c79f7;
      border-bottom-color: transparent;
      &::before {
        content: '';
        display: inline-block;
        width: 90rpx;
        height: 8rpx;
        background: #027aff;
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -45rpx;
        border-radius: 0 0 4rpx 4rpx;
      }
    }
    .tab-item__label {
      display: flex;
      align-items: center;
    }
  }
}
</style>